<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>User Input</title>
</head>
<body>

<div id="app" class="container">
	<div class="panel panel-default">
        <div class="panel-heading text-center">
            <h2>User Input</h2>
        </div>
			<div class="panel-body">
				<form class="form-horizontal">
					<!-- User Name -->
					<div class="form-group">
						<label for="userName" class="col-sm-2 control-label">UserName</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" v-model="user.username" id="userName" aria-describedby="helpBlock1" placeholder="place input UserName....">
						</div>
						<span id="helpBlock1" class="col-sm-2 has-error help-block ">{{userNameMsg}}</span>
					</div>
					
					<!-- Password -->
					<div class="form-group">
						<label for="password" class="col-sm-2 control-label">Password</label>
						<div class="col-sm-4">
							<input type="password" class="form-control" v-model="user.password" id="password" placeholder="place input Password....">
						</div>
						<div class="col-sm-2 help-block has-error">{{passwordMsg}}</div>
					</div>

					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button  class="btn btn-primary" v-on:click="quit">Quit</button>
							<button  class="btn btn-primary" v-on:click="submitForm">Submit</button>
						</div>
					</div>
				</form>
			</div>
		</div>
 
</div>

<script>

Vue.http.options.emulateJSON = true;
var vm = new Vue({
    el: '#app',
    ready: function() {
    	var href = window.location.href;
    	var id='';
    	if(href.indexOf("=")>0){
    		id = href.substring(href.indexOf("=")+1);
    	}
        this.$http.get('newUser.json?id='+ id, function(data) {
        	users = data;
            this.$set('user', data);
            console.dir(this.user.id)
        }).error(function(data, status, request) {
            console.log('fail' + status + "," + request);
        })
    },
    data: {
    	userNameMsg:'',
    	passwordMsg:'',
    },
    methods:{
    	submitForm: function(e) {
    		e.preventDefault();
           	console.dir(this.user)
           	var flag = true;
           	if(this.user.username==null){
           		this.userNameMsg = '用户名为空';
           		flag=false;
           		$("#userName").parents('.form-group').addClass('has-error');
           	}else{
           		$("#userName").parents('.form-group').removeClass('has-error');
           		this.userNameMsg = '';
           	}
           	if(this.user.password ==null){
           		this.passwordMsg = '密码为空';
           		$("#password").parents('.form-group').addClass('has-error');
           		flag=false;
           	}else{
           		$("#password").parents('.form-group').removeClass('has-error');
           		this.passwordMsg = '';
           	}
           	if(flag){
	            this.$http.post('/addUser', this.user).then((response) => {
	                // success callback
	               console.dir(response)
	               console.dir('success...')
	               //router.push({ path: 'index.html')
	              window.location.href="http://localhost/index.html";
	            }, (response) => {
	                // error callback
	            });
           	}
        },
        quit: function(){
        	console.dir('quit submit...')
        }
    }
});
</script>
</body>
</html>